<script setup>
  // import { onLoad } from '@dcloudio/uni-app'
  import { getList } from '@/apis/message'
  import { ref, onMounted } from 'vue'
  import { toast } from '@/utils/utils'

  const list = ref([])
  const pages = ref(0)
  const page = ref(1)

  const loadData = async () => {
    console.log('loadData')
    const res = await getList({
      contentType: 200,
      page: page.value,
      pageSize: 10,
    })
    list.value = res.data.items || []
    // list.value = [
    //   { id: 1, title: 'hehe1', isRead: 0, created: '2023-08-04 15:13' },
    //   { id: 2, title: 'hehe2', isRead: 1, created: '2023-08-04 15:14' },
    // ]
    pages.value = res.data.pages
  }

  // onLoad(() => {
  //   console.log('onLoad')
  //   loadData()
  // })

  onMounted(() => {
    loadData()
  })

  const onScrollToLower = () => {
    if (page.value >= pages.value) return toast('没有更多了')
    page.value++
    loadData()
  }

  const refreshing = ref(false)
  const onRefresh = async () => {
    refreshing.value = true
    // 刷新：重新加载第一页的数据，将现有的数据清空
    page.value = 1
    list.value = []
    try {
      await loadData()
    } finally {
      refreshing.value = false
    }
  }
</script>
<template>
  <scroll-view
    class="scroll-view"
    refresher-enabled
    scroll-y
    :refresher-triggered="refreshing"
    @scrolltolower="onScrollToLower"
    @refresherrefresh="onRefresh"
  >
    <view class="scroll-view-wrapper">
      <view class="message-action">
        <text class="iconfont icon-clear"></text>
        全部已读
      </view>
      <uni-list :border="false">
        <uni-list-item
          v-for="v of list"
          :key="v.id"
          to="/subpkg_message/content/index"
          ellipsis="1"
          :title="v.title"
          :rightText="v.created"
        >
          <template v-if="v.isRead === 0" v-slot:header>
            <text class="dot"></text>
          </template>
        </uni-list-item>
      </uni-list>
      <view v-if="list.length === 0" class="message-blank">暂无消息</view>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
  @import './styles.scss';
</style>
